<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <a class="md-title-icon" href="http://pluralsight.com" target="_blank"><i></i></a>
            <span class="mdl-layout-title">Storyline Tracker</span>
            <button id="reset-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent mdl-button--raised" (click)="resetDb()">Reset Data</button>
        </div>
        <div class="mdl-navigation">
            <a *ngFor="#item of menuItems" [routerLink]="item.link" class="nav-link" href="">{{item.caption}}</a>
        </div>
    </header>
    <main class="mdl-layout__content">
        <section>
            <div class="page-content">
                <router-outlet></router-outlet>
            </div>
        </section>
    </main>
    <story-spinner></story-spinner>
    <toast></toast>
    <modal-confirm></modal-confirm>
</div>